<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <Remind v-if="isShowRemind" @update:data="isShowRemind = !isShowRemind">
                <template #title>
                    短视频发布注意事项 <el-link href="https://www.baidu.com/" type="primary" underline="always">（查看视频）</el-link>
                </template>
                <template #content>
                    请务必发布原创视频，且确保视频为首次发布（未在任何视频平台发布过），不可重复发布，避免审核无法通过。<br>
视频清晰，不可展示商家地址、商家联系方式、二维码等，不可展示价格、打折等，不可进行好物安利并引导站外购买等, <el-link href="https://www.baidu.com/" type="danger">会导致帐号异常甚至封号</el-link> 。<br>
不可发布裸露、招商加盟、药品、医疗、金融、交友、灰色行业和国家和平台禁止行业视频相关内容, <el-link href="https://www.baidu.com/" type="danger">会导致封号并可能承担法律责任</el-link> 。<br>
请用户严格遵守法律法规，不得发布任何违法、违规、低俗、过激、虚假及违反社会公序良俗等信息！<br>
请仔细阅读并遵守：<el-link href="https://www.baidu.com/" type="primary" underline="always">信息安全规范承诺函、禁用语及敏感词规则。</el-link><br>
开始使用本产品/服务即代表用户（购买或使用方）完全知情并同意遵守信息安全规范承诺及相应的规则规章，如有违反所造成的的一切后果及责任由用户完全承担。
                </template>
            </Remind>
        </div>
        <div class="pt-26px pl-26px pr-26px text-14px font-bold">
            1.选择账号 <el-text type="danger">*</el-text>
        </div>
        <div class="flex pt-10px pl-26px pr-26px choose-account">
            <div class="item">
                <el-dropdown @command="handleCommand" class="w-full h-full">
                    <div class="w-full h-full flex items-center justify-between drop-down-top">
                        <div class="flex items-center">
                            <img src="" alt="">
                            <div>
                                <p>昵称：常州翔高精密</p>
                                <span>平台：抖音</span>
                            </div>
                        </div>
                        <svg-icon size="16px" icon-class="arrow-down-s-line"></svg-icon>
                    </div>
                    <template #dropdown>
                        <ul class="drop-down-down">
                            <li>
                                <img src="" alt="">
                                <div class="flex flex-col">
                                    <p>昵称：常州翔高精密</p>
                                    <span>平台：抖音</span>
                                    <span>账号：</span>
                                </div>
                            </li>
                        </ul>
                    </template>
                </el-dropdown>
            </div>
            <div class="item">
                <el-dropdown @command="handleCommand" class="w-full h-full">
                    <div class="w-full h-full flex items-center justify-between drop-down-top">
                        <div class="flex items-center">
                            <img src="" alt="">
                            <div>
                                <p>昵称：常州翔高精密</p>
                                <span>平台：抖音</span>
                            </div>
                        </div>
                        <svg-icon size="16px" icon-class="arrow-down-s-line"></svg-icon>
                    </div>
                    <template #dropdown>
                        <ul class="drop-down-down">
                            <li>
                                <img src="" alt="">
                                <div class="flex flex-col">
                                    <p>昵称：常州翔高精密</p>
                                    <span>平台：抖音</span>
                                    <span>账号：</span>
                                </div>
                            </li>
                        </ul>
                    </template>
                </el-dropdown>
            </div>
            <div class="item">
                <el-dropdown @command="handleCommand" class="w-full h-full">
                    <div class="w-full h-full flex items-center justify-between drop-down-top">
                        <div class="flex items-center">
                            <img src="" alt="">
                            <div>
                                <p>昵称：常州翔高精密</p>
                                <span>平台：抖音</span>
                            </div>
                        </div>
                        <svg-icon size="16px" icon-class="arrow-down-s-line"></svg-icon>
                    </div>
                    <template #dropdown>
                        <ul class="drop-down-down">
                            <li>
                                <img src="" alt="">
                                <div class="flex flex-col">
                                    <p>昵称：常州翔高精密</p>
                                    <span>平台：抖音</span>
                                    <span>账号：</span>
                                </div>
                            </li>
                        </ul>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <div class="pt-26px pl-26px pr-26px text-14px font-bold">
            2.选择关键词/话题 <el-text type="danger">*</el-text>
        </div>
        <div class="pt-10px pl-26px pr-26px w-916px">
            <el-select v-model="formData.keyword" placeholder="请搜索或选择关键词/话题">
                <el-option
                    v-for="item in formData.keywords"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <div class="text-12px text-#999 mt-10px">
                请选择1～5个关键词/话题插入到标题中，如果选择的关键词/话题与视频不相关，视频可能会被<el-text type="danger">限流</el-text>，严重将会<el-text type="danger">封号</el-text>
            </div>
        </div>
        <div class="pt-26px pl-26px pr-26px text-14px font-bold">
            3.填写视频标题 <el-text type="danger">*</el-text>
        </div>
        <div class="pt-10px pl-26px pr-26px w-916px">
            <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
            <div class="text-12px text-#999 lh-16px mt-10px">
                1.标题+话题字符数量限制：快手50字符、BiliBili限制80字符，<el-text type="danger">超过限制时截断标题保留话题</el-text><br>2.视频标题中必须带关键词； 
            </div>
        </div>
        <div class="pt-26px pl-26px pr-26px text-14px font-bold">
            4.上传视频 <el-text type="danger">*</el-text>
        </div>
        <div class="pt-10px pl-26px pr-26px w-916px">
            <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
            >
                <template #tip>
                    <div class="flex items-center mt--15px">
                        <el-button type="primary"><svg-icon size="16px" icon-class="video-upload-fill" class="mr-5px"></svg-icon>选择文件</el-button>
                        <div class="text-12px text-#999 lh-16px ml-10px !mt-0px el-upload__tip">
                        上传视频，大小上限<el-text type="danger">128M</el-text>，建议视频格式为<el-text type="danger">MP4</el-text>
                        </div>
                    </div>
                </template>
            </el-upload>
        </div>
        <div class="pt-26px pl-26px pr-26px text-14px font-bold">
            5.选择地点/商圈（仅抖音22.2.0版本以上支持）
        </div>
        <div class="flex pt-10px pl-26px pr-26px">
            <el-input placeholder="请输入地点/商圈名称" class="w-200px mr-12px"></el-input>
            <el-input placeholder="请输入城市" class="w-200px mr-12px"></el-input>
            <el-button type="primary" :icon="Search" v-debounce="{ callback: handleSearch, delay: 300 }">搜索</el-button>
        </div>
        <div class="flex pt-15px pl-26px pr-26px w-961px">
            <el-table class="w-full">
                    <el-table-column prop="name" label="名称" width="200" />
                    <el-table-column prop="address" label="地址" />
                    <el-table-column prop="city" label="城市" width="120" />
                    <el-table-column label="" width="100">
                        <template #default="scope">
                            <el-button type="primary" size="small">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
        </div>
        <div class="pt-15px pl-26px pr-26px pb-26px">
            <el-button type="primary">下一步，发布抖音视频</el-button>
            <div class="text-12px text-#999 lh-16px mt-10px">
                注：1.为了保障用户的知情权，通过系统发布抖音视频时，需要已授权的手机抖音app扫码发布<br>2.如果选择了快手/BiliBili账号，视频将直接发布，用户可在视频列表中查看 
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { UploadProps, UploadUserFile } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

const isShowRemind = ref(true)

const formData = reactive({
    keyword:'',
    keywords:[
        {
            label: '关键词1',
            value: '1'
        }
    ],
    title:'',
})

const fileList = ref<UploadUserFile[]>([
  {
    name: 'element-plus-logo.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}

function handleCommand(command:any) {
    console.log(command)
}

function handleSearch() {
    console.log('search')
}
</script>

<style lang="scss" scoped>
.choose-account{
    .item{
        width: 280px;
        height: 64px;
        border-radius: 4px;
        padding: 0 16px;
        cursor: pointer;
        margin-right: 12px;
        background-color: var(--mainBg);
        .drop-down-top{
            img{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-right: 14px;
            }
            p{
                font-size: 14px;
                line-height: 22px;
                font-weight: bold;
                color: var(--title-color);
            }
            span{
                font-size: 14px;
                line-height: 22px;
                color: #999;
            }
        }
        
    }
}
.drop-down-down{
    width: 280px;
    li{
        border-bottom:1px solid #ddd;
        border-radius: 4px;
        padding: 12px 16px;
        cursor: pointer;
        background-color: #fff;
        display: flex;
        align-items: center;
        transition:all 0.3s;
        img{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 14px;
        }
        p{
            font-size: 14px;
            line-height: 22px;
            font-weight: bold;
            color: var(--title-color);
        }
        span{
            font-size: 14px;
            line-height: 22px;
            color: #999;
        }
        &:hover{
            background-color:var(--mainBg);
            transition:all 0.3s;
        }
    }
}
</style>